<template>
  <div>
    <button @click="insert">随机插入一个元素</button>
    <hr />
    <TransitionGroup name="list" tag="ul">
      <li v-for="(item, index) in items" :key="item">
        {{ item }}

        <button @click="del(index)">×</button>
      </li>
    </TransitionGroup>

    <button @click="show = !show">Toggle {{ show }}</button>
    <hr />
    <Transition name="a" leave-active-class="aaaa">
      <div v-if="show" class="box"></div>
    </Transition>
    <hr />
    <div class="box animate__animated animate__shakeX animate__infinite"></div>
    <hr />

    <Transition
      enter-active-class="animate__backInLeft"
      leave-active-class="animate__backOutRight"
    >
      <div v-if="show" class="box animate__animated"></div>
    </Transition>
  </div>
</template>

<script>
let id = 6;

export default {
  name: "App",

  data() {
    return {
      show: true,

      items: [1, 2, 3, 4, 5],
    };
  },

  methods: {
    insert() {
      // 计算一个随机的下标
      const i = Math.round(Math.random() * this.items.length);

      this.items.splice(i, 0, id++);
    },
    del(index) {
      this.items.splice(index, 1);
    },
  },
};
</script>

<style>
.list-move,/* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 3s ease-in;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

.list-leave-active {
  position: absolute;
}

.box {
  width: 100px;
  height: 100px;
  background-color: pink;
}

@keyframes flash {
  0% {
    transform: scale(1.5);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

.aaaa {
  animation: flash 3s linear;
}

.a-enter-active {
  animation: flash 3s linear reverse;
}
</style>
